今週は、ちょっと上級者向けのJavaScriptテクニックを一つ紹介します。紹介するのは「時間に応じて背景画像を変化させる方法」です。たとえば、朝、昼、夜で背景画像が変化するページ。このようなページなら、管理者（あなた）と訪問者の距離も少しは縮まるかもしれませんよ！？
ここでは時間に応じて、朝（back1.gif）、昼（back2.gif）、夜（back3.gif）の3種類の画像を背景画像に表示させることにします。あらかじめ、これら3種類の画像を用意しておいてください。続いて、時間に応じて背景画像を変化させる処理ですが、これはJavaScriptの自作関数「bimage()」で実現します。（自作関数「bimage()」は、必ず「HEAD」タグ内に作成してください）。まずは、時間（t）が7時未満の場合に、夜（back3.gif）の画像を表示させる処理を記述しましょう。これは、「t」が7未満(t<7)のときに、夜（back3.gif）の画像を表示させる「BODY」タグをdocument.writeで書き出してやればOKです。
<SCRIPT language="JavaScript">
<!--
function bimage(t){
if (t<7) document.write("<BODY background='back3.gif'>");
}
//-->
</SCRIPT>
これで7時未満の処理は完成しました。続いて、7時以降の処理を同様に記述していきます。今回は、0:00〜6:59を夜、7:00〜10:59を朝、11:00〜18:59を昼、19:00〜23:59を再び夜、としました。よって、このような処理が実現されるようにif文を繰り返し記述します。朝（tが7以上かつ11未満）、昼（tが11以上かつ19未満）のように2つの条件文を併記する場合は、「&&」（かつ）を利用してください。なお、同様の処理をif〜elseで記述しても構いません。
<SCRIPT language="JavaScript">
<!--
function bimage(t){
if (t<7) document.write("<BODY background='back3.gif'>");
if (t>=7 && t<11) document.write("<BODY background='back1.gif'>");
if (t>=11 && t<19) document.write("<BODY background='back2.gif'>");
if (t>=19) document.write("<BODY background='back3.gif'>");
}
//-->
</SCRIPT>
あとは、時間の取得と自作関数「bimage()」を呼び出すJavaScriptを記述してやれば完成です。このJavaScriptは「HEAD」と「BODY」の間に記述してください。時間の取得は、「new Date()」でパソコンのシステム時計から時刻を取り出し、さらに「getHours()」で時間（0〜23の数値）に変換すればOKです。同時に、この値を引き継いで自作関数「bimage()」を呼び出します。以下に具体的な完成例を掲載しておくので、これを参考にチャレンジしてみてください。
<HTML>
<HEAD>
<TITLE>初めてのホームページ作成</TITLE>
</HEAD>
<BODY bgcolor=#FFFFFF>
<SCRIPT language="JavaScript">
<!--
function bimage(t){
if (t<7) document.write("<BODY background='back3.gif'>");
if (t>=7 && t<11) document.write("<BODY background='back1.gif'>");
if (t>=11 && t<19) document.write("<BODY background='back2.gif'>");
if (t>=19) document.write("<BODY background='back3.gif'>");
}
//-->
</SCRIPT>
<SCRIPT language="JavaScript">
<!--
h=new Date();
bimage(h.getHours());
//-->
</SCRIPT>
このホームページは時間に応じて背景が変化します。<BR>
変化を今すぐ確認したい人は…、<BR>
パソコンの時刻設定を変更してみましょう。<BR>
ただし、確認後に時刻設定を元に戻すのを忘れないように！
</BODY>
</HTML>
※このjava scriptは<HEAD></HEAD>内に入れても動作しますが、isweb無料では正常に動作しない可能性がありますのでご注意ください。
